<template>
<div>
	<h2 class="intro-title">InputNumber 计数器</h2>
	<p class="intro-content">仅允许输入标准的数字值，可定义范围</p>

	<demo01></demo01>
	<demo02></demo02>
	<demo03></demo03>
	<demo04></demo04>
	<demo05></demo05>
	<demo06></demo06>
	<demo07></demo07>

	<h3 class="base-title">Attributes</h3>
	<table class="attri-table">
		<thead>
			<tr>
				<th>参数</th>
				<th>说明</th>
				<th>类型</th>
				<th>可选值</th>
				<th>默认值</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for='item in list1' :key='item.val1'>
				<td>{{item.val1}}</td>
				<td>{{item.val2}}</td>
				<td>{{item.val3}}</td>
				<td>{{item.val4}}</td>
				<td>{{item.val5}}</td>
			</tr>
		</tbody>
	</table>

	<h3 class="base-title">Events</h3>
	<table class="attri-table">
		<thead>
			<tr>
				<th>事件名称</th>
				<th>说明</th>
				<th>回调参数</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for='item in list2' :key='item.val1'>
				<td>{{item.val1}}</td>
				<td>{{item.val2}}</td>
				<td>{{item.val3}}</td>
			</tr>
		</tbody>
	</table>
</div>
</template>

<script>
import demo01 from './demo01.vue'
import demo02 from './demo02.vue'
import demo03 from './demo03.vue'
import demo04 from './demo04.vue'
import demo05 from './demo05.vue'
import demo06 from './demo06.vue'
import demo07 from './demo07.vue'

const list1 = [{
	val1: 'value / v-model',
	val2: '绑定值',
	val3: 'number',
	val4: '--',
	val5: '0',
},{
	val1: 'step',
	val2: '计数器步长',
	val3: 'number',
	val4: '--',
	val5: '1',
},{
	val1: 'size',
	val2: '计数器尺寸',
	val3: 'string',
	val4: 'large, small',
	val5: '--',
},{
	val1: 'disabled',
	val2: '是否禁用计数器',
	val3: 'boolean',
	val4: '--',
	val5: 'false',
},{
	val1: 'controls-position',
	val2: '控制按钮位置',
	val3: 'string',
	val4: 'right',
	val5: '--',
},{
	val1: 'placeholder',
	val2: '输入框默认 placeholder',
	val3: 'string',
	val4: '--',
	val5: '--',
},{
	val1: 'precision',
	val2: '数值精度',
	val3: 'number',
	val4: '--',
	val5: '--',
}].sort((a, b) => {
	return a.val1.localeCompare(b.val1);
});

const list2 = [{
	val1: 'change',
	val2: '绑定值被改变时触发',
	val3: 'currentValue, oldValue',
	val4: '--',
	val5: '--',
},{
	val1: 'blur',
	val2: '在组件 Input 失去焦点时触发',
	val3: '(event: Event)',
	val4: '--',
	val5: '--',
},{
	val1: 'focus',
	val2: '在组件 Input 获得焦点时触发',
	val3: '(event: Event)',
	val4: '--',
	val5: '--',
}].sort((a, b) => {
	return a.val1.localeCompare(b.val1);
});

export default {
	components: {
		'demo01': demo01,
		'demo02': demo02,
		'demo03': demo03,
		'demo04': demo04,
		'demo05': demo05,
		'demo06': demo06,
		'demo07': demo07,
	},
	data () {
		return {
			list1: list1,
			list2: list2,
		};
	},
}
</script>

<style scoped>
</style>
